<template>
  <div>
    <MyPieChart :legendData="legendData" :seriesData="seriesData"></MyPieChart>
  </div>
</template>

<script>
  import MyPieChart from './dashboard/MyPieChart'
  import {countNews } from '@/api/biz/news'
  import {listAllCategory} from '@/api/biz/category'

  export default {
    name: 'Index',
    components: {
      MyPieChart
    },
    data() {
      return {
        legendData: ['工业', '技术', '外汇', '黄金', '预测'],
        seriesData: [{value: 320,name: '黄金'},
          {value: 240,name: '工业'},
          {value: 149,name: '预测'},
          {value: 100,name: '外汇'},
          {value: 59,name: '技术'}
        ]
      }
    },
    created() {
      this.getCountNews();
    },
    methods: {
      //饼图组件监听了标记数据的变换，标记数据变换会重新绘图
      //这里需要先查询数据，再查询分类
      getCountNews() {
        countNews().then(res => {
          this.seriesData = res;
          //console.log(this.seriesData)
        }).then(()=>{
            this.getCategoryList()
        });
      },
      getCategoryList() {
        listAllCategory().then(res => {
          this.legendData = [];
          //解析分类类别，得到分类的legend标记
          res.forEach(item => {
            this.legendData.push(item.categoryName)
          })
          //console.log(this.legendData)
        });
      }
    }
  }
</script>

<style>
</style>
